<template>
  <div>
    <el-dialog title="更换头像" v-model="isShowDialog" width="669px">
      <div class="cropper-warp">
        <div class="cropper-warp-left">
          <img :src="cropperImg" class="cropper-warp-left-img" />
        </div>
        <div class="cropper-warp-right">
          <div class="cropper-warp-right-title">预览</div>
          <div class="cropper-warp-right-item">
            <div class="cropper-warp-right-value">
              <img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
            </div>
            <div class="cropper-warp-right-label">100 x 100</div>
          </div>
          <div class="cropper-warp-right-item">
            <div class="cropper-warp-right-value">
              <img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
            </div>
            <div class="cropper-warp-right-label">50 x 50</div>
          </div>
        </div>
      </div>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">更 换</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, nextTick, defineComponent } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import request from '/@/utils/request';

export default defineComponent({
  name: 'cropperIndex',
  emits: ['close'],
  setup(props, { emit }) {
    const state = reactive({
      isShowDialog: false,
      cropperImg: '',
      cropperImgBase64: '',
      cropper: null as any,
    });


    let flag=false;
    // 打开弹窗
    const openDialog = (imgs: any) => {
      state.cropperImg = imgs;
      state.isShowDialog = true;
      nextTick(() => {
        if(!flag){
          initCropper();
          flag=true;
        }else{
          state.cropper.destroy();
          initCropper();
        }
      });
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 更换
    const onSubmit =  () => {
      let zfileId='' as any;
      // state.cropperImgBase64 = state.cropper?.getCroppedCanvas().toDataURL('image/jpeg');
      state.cropper?.getCroppedCanvas().toBlob(
          async (blob:any) => {
            let data = new FormData();
            data.append("file", blob, "avatar.jpg");
            const zfile= await request({
              url: 'gen/user/clip',
              method: 'post',
              data:data,
            }) as any;
            zfileId=zfile.id;
            // emit('close', { cropperImg: state.cropperImgBase64 });
            emit('close', { cropperImg: zfileId });
            closeDialog();
          },
      );
    };


    // 初始化cropperjs图片裁剪
    const initCropper = () => {
      const letImg: any = document.querySelector('.cropper-warp-left-img');
      (<any>state.cropper) = new Cropper(letImg, {
        viewMode: 1,
        dragMode: 'none',
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: '.before',
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false,
        crop: () => {
          state.cropperImgBase64 = (<any>state.cropper).getCroppedCanvas().toDataURL('image/jpeg');
        },
      });
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      initCropper,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.cropper-warp {
  display: flex;
  .cropper-warp-left {
    position: relative;
    display: inline-block;
    height: 400px;
    flex: 1;
    border: 1px solid var(--el-border-color);
    background: var(--el-color-white);
    overflow: hidden;
    background-repeat: no-repeat;
    cursor: move;
    border-radius: var(--el-border-radius-base);
    .cropper-warp-left-img {
      width: 100%;
      height: 100%;
    }
  }
  .cropper-warp-right {
    width: 150px;
    height: 400px;
    .cropper-warp-right-title {
      text-align: center;
      height: 20px;
      line-height: 20px;
    }
    .cropper-warp-right-item {
      margin: 15px 0;
      .cropper-warp-right-value {
        display: flex;
        .cropper-warp-right-value-img {
          width: 100px;
          height: 100px;
          border-radius: var(--el-border-radius-circle);
          margin: auto;
        }
        .cropper-size {
          width: 50px;
          height: 50px;
        }
      }
      .cropper-warp-right-label {
        text-align: center;
        font-size: 12px;
        color: var(--el-text-color-primary);
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>
